<template>
 <div>
    <h1>个人简介</h1>
    <div>姓名:{{ person.name }} <button @click="person.name='monica'">改名</button></div>
    <div>年龄:{{ person.age }} <button @click="person.age++">改年龄</button></div>
    <div>工作:{{ person.job }} <button @click="person.job='enginee'">改工作</button></div>
  </div>
</template>

<script lang='ts' setup>
import { reactive,watchEffect} from 'vue'
interface PersonType{
  name:string
  age:number
  job:string
}
let person=reactive<PersonType>({
  name:'Giles',
  age:39,
  job:'teacher'
})
watchEffect(()=>{
  // person.name
  // person.age
  // person.job
  console.log('-----------------');
  
})
</script>

<style lang='scss' scoped>
</style>